<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>比价搜索</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="../utils/flexible.js"></script>
    <link rel="stylesheet" href="../css/category.css">
</head>
<body>
    <header>
        <button>返回</button>
        <img src="../images/header_logo.png" alt="">
        <img src="../images/header_app.png" alt="">
    </header>
    <div class="search">
        <input type="text" placeholder="请输入你想比较的商品">
        <p>搜索</p>
    </div>
    
    
    <!-- 全部分类 -->
    <ul class="ulall">
    </ul>

    <!-- 底部 -->
    <footer>
        <ul>
            <li>登录</li>
            <li>注册</li>
            <li class="returntop">返回顶部</li>
        </ul>
        <p>
            手机APP下载慢慢买手机版-掌上比价平台<br>
            m.manmanbuy.com
        </p>
    </footer>
</body>
</html>

<script>
    // 返回上一级
    let bn=document.querySelector('button');
    bn.addEventListener('click',function(){
        history.go(-1);
    })

    
    // 获取全部大分类标题数据
    $.ajax({
        url:'http://chst.vip:1234/api/getcategorytitle'
    })
    .then(res=>{
        render1(res.result)
        // console.log(res.result);
    })
    // 全部大分类标题函数
    function render1(data=[]){
        let html="";
        data.forEach(item=>{
            html+=`
                <li titleid=${item.titleId}>
                    <div class='shang'>
                        ${item.title} 
                        <p>▼</p>
                    </div>
                    <ul class='xia'></ul>
                </li>
            `
        })
        $('.ulall').html(html)
        
        //获取li,把大标题对应的列表加到标题下面
        let divs=document.querySelectorAll('.ulall li .xia');
        let arr=[]
        for(var i=0;i<8;i++){
            $.ajax({
                url:'http://chst.vip:1234/api/getcategory',
                data:{
                    titleid:i
                }
            })
            .then(res=>{
                // console.log(res.result);
                data=res.result;
                let html=''
                data.forEach(item=>{
                    html+=`
                        <li category=${item.category} categoryid=${item.categoryId}>
                            ${item.category}
                        </li>
                    `
                })
                arr.push(html)
                for(var j=0;j<arr.length;j++){
                    divs[j].innerHTML=arr[j];
                }
            })
        }
        
        // 给大标题注册事件
        let on=0;
        $('.shang').click(function(){
            if(!on){
                console.log(6666);
                $(this).next().find('li').css({
                    display: 'block'
                }) 
                $(this).parent().siblings().find('li').css({
                    display: 'none'
                })
                on=!on
            }else{
                $(this).next().find('li').css({
                    display: 'none'
                })
                on=!on
            }
        })

        
        // 通过点击小列表获取所有小li的id，通过ajax获取数据
        $('.xia').on('click','li',function(){
            let categoryid=$(this).attr('categoryId');
            let category=$(this).attr('category');
            $.ajax({
                url:'http://chst.vip:1234/api/getcategorybyid',
                data:{
                    categoryid:categoryid
                }
            })
            .then(res=>{
                console.log(categoryid);
                console.log(res);
                location.href=`./bijia.html?title=${category}&categoryid=${categoryid}`
            })
            
        })
    }



    
    





    
    



    // 返回顶部
    $('footer .returntop').click(function(e){
        document.documentElement.scrollTop=0;
        console.log(456);
    })
</script>